<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>IDIS 工作室 | 修改系统管理员</title>


    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../DataTables/media/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../DataTables/media/css/dataTables.editor.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
<!-- 引入导航 -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right nav-col">
                <li><a class="active" href="abstract_alter.html">工作室简介修改</a></li>
                <li><a href="teacher_alter.html">指导老师页面管理</a></li>
                <li><a href="member_alter.html">成员信息管理</a></li>
                <li><a href="works_alter.html">作品管理</a></li>
                <li><a href="contact_alter.html">联系方式修改</a></li>
                <li class="dropdown">
                    <a href="sysmanger.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">系统管理 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="sysmanger.html">管理员配置</a></li>
                        <li><a href="#">修改个人信息</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">退出系统</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!--内容-->
<div class="container" id="page-wrapper">
    <div class="row">
        <div class=".col-md-6 .col-md-offset-3">
            <h3 class="backstage_title">管理员管理页面</h3>
            <form class="form-horizontal backstage_form">
                <div class="form-group">
                    <div class="panel-body">
                        <button id="create" type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">添加管理员</button>
                        <button id="edit" type="button" class="btn btn-default">修改管理员</button>
                        <button id="remove" type="button" class="btn btn-default">删除管理员</button>
                    </div>
                </div>
                <div class="panel-body">
                    <table width="100%" class="table display table-striped table-bordered table-hover" cellspacing="0" id="list">
                        <thead>
                        <tr>
                            <th width="20%">ID</th>
                            <th width="20%">名字</th>
                            <th width="40%">权限</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </form>

            <!-- Modal1 -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel">标题</h4>
                        </div>
                        <input  id="id" type="hidden" class="form-control">
                        <div class="modal-body">
                            <form role="form">
                                <div class="form-group">
                                    <label for="id1">ID</label>
                                    <input type="text" class="form-control" id="id1" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="name">账号</label>
                                    <input type="text" class="form-control" id="name">
                                </div>
                                <div class="form-group">
                                    <label for="password">密码(若不修改密码，可置空)</label>
                                    <input type="password" class="form-control" id="password">
                                </div>
                                <div class="form-group" id="right">
                                    <label for="type">权限</label>
                                    <select class="form-control" id="type">
                                    </select>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button id="btn-submit" type="submit" class="btn btn-default">提交</button>
                            <button id="btn-reset" type="reset" class="btn btn-default">重置</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>  <!-- Modal1 -->

        </div>
    </div>
</div>


<!-- Page-Scripts  -->
<script charset="utf8" src="../DataTables/media/js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script charset="utf8" src="../DataTables/media/js/jquery.dataTables.min.js"></script>
<script charset="utf8" src="../DataTables/media/js/dataTables.editor.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script charset="utf8" src="../layer/layer.js"></script>
<script>
    $(document).ready(function() {

        var roles;

        $.ajax({
            url:'/api/admin/user/roles',
            type:"get",
            dataType:"json",
            success:function (data) {
                roles=data['data'];
                $.each(roles, function(index, value, array) {
                    $("#myModal #type").append("<option value='"+index+"'>"+value.valueOf()+"</option>");
                });
            }
        });

        var table = $('#list').DataTable({   //此处list与页面table的id相同
            ajax: '/api/admin/user/all',
            language: {
                "url": "../DataTables/i18n/Chinese.json"   //datatables国际化
            },
            columns: [
                {data: "id","visible" : false},
                {data: "username"},
                {data: "role",
                    render: function ( data ) {
                        return data ?
                            roles[data]:
                            null;
                    },
                    defaultContent: "未设置权限"}
            ],
            responsive: true,
            select: true //datatables select 插件
        });

        /* 添加按钮 */
        $('#create').click( function () {
            resetForm();
            $("#myModal #id1").val("");
            $("#myModal #myModalLabel").text("添加管理员");
        } );

        /* 修改按钮 */
        $('#edit').click( function () {
            var rowData =table.rows( { selected: true } ).data().toArray();
            if(rowData.length>=1){
                var id = rowData[0].id;
                $.ajax({
                    type:"get",
                    url:"/api/admin/user/id/"+id,  //修改接口
                    dataType:"json",
                    success: function(json){
                        $("#myModal #id1").val(json.data.id);
                        $("#myModal #name").val(json.data.username);
                        $("#myModal #type").val(json.data.role );
                    }
                });
                $("#myModal #myModalLabel").text("修改管理员");
                $('#myModal').modal({keyboard:false,show:true})
            }else{
                layer.msg('请选择一行!', {time: 1000, icon:7});   //layer弹出层，1000代表1秒后关闭。7为图标编号
            }
        } );


        /* 删除按钮 */
        $('#remove').click( function () {
            var rowData =table.rows( { selected: true } ).data().toArray();  //得到datatables选中行的值并转成数组
            if(rowData.length==1){
                layer.msg('你确定删除该记录吗?', {time: 0 ,btn: ['确定', '取消'],yes: function(index){
                        del(rowData[0].id);
                        layer.close(index);
                    }
                });
            }else{
                layer.msg('请选择一行!', {time: 1000, icon:7});
            }
        } );

        /* 表单添加、修改提交按钮 */
        $("#myModal #btn-submit").click( function () {
            var id = $("#myModal #id1").val();
            if(id == null || id == ""){     //将添加和编辑表单合二为一。根据ID是否为空判断到底是添加还是修改。
                submit("/api/admin/user/save");
            }else{
                submit("/api/admin/user/update");
            }
        } );

        /* 表单重置按钮 */
        $("#myModal #btn-reset").click( function () {
            resetForm();
        } );

        /* 清空表单 */
        function resetForm(){
            $("#myModal #name").val("");
            $("#myModal #password").val("");
            $("#myModal #type").val("");
        }

        /* 表单提交操作 */
        function submit(url){
            var id = $("#myModal #id1").val();
            var name = $("#myModal #name").val();
            if($("#myModal #password").val()!=""){
                var password = $("#myModal #password").val();
            }
            var right = $("#myModal #type").val();
            $.ajax({
                type : "post",
                url : url,  //添加接口
                dataType : "json",
                data : {
                    "id":id,    //注意此处的blog与Blog对应，id与Blog的属性id对应
                    "username" : name,
                    "password" : password,
                    "role" : right
                },
                success : function(data) {
                    if(data.result){
                        layer.msg(data.msg, {time: 1000, icon:1});
                        resetForm();
                        $("#myModal").modal('hide');
                        table.ajax.reload();//重新加载table
                    }
                },
                error : function() {
                    layer.msg('操作失败!', {time: 1000, icon:2});
                }
            });
        }
        /* 删除操作 */
        function del(id){
            $.ajax({
                type : "post",
                url : "/api/admin/user/delete",    //删除接口 (id)
                dataType : "json",
                data : {
                    "id" : id
                },
                success : function(data) {
                    if (data.result){
                        layer.msg(data.msg, {time: 1000, icon:1});
                        table.ajax.reload();
                    }
                },
                error : function() {
                    layer.msg('系统出错!', {time: 1000, icon:2});
                }
            });
        }
    });
</script>
</body>
</html>